<template>
  <div class="py-4 bg-white">
    <table class="text-left">
      <!-- head -->
      <thead class="border-b text-lg">
        <tr>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">股票</th>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">价格</th>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">涨幅</th>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">量比</th>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">涨速</th>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">换手</th>
          <th scope="col" class="px-4 py-2 whitespace-nowrap">板块</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.symbol" class="border-b">
          <td class="px-4 py-2">
            <Stock :symbol="item.symbol" type="yidong" :name="item.stock_chi_name"></Stock>
          </td>
          <td class="px-4 py-2 font-semibold" :class="item.change_percent > 0 ? 'text-red-500' : 'text-green-600'">
            {{ item.price.toFixed(2) }}
          </td>
          <td class="px-4 py-2">
            <ChangePercent :percent="item.change_percent"></ChangePercent>
          </td>
          <td class="px-4 py-2 font-semibold" :class="item.volume_bias_ratio > 3 ? 'text-red-500' : 'text-green-600'">
            {{ item.volume_bias_ratio.toFixed(2) }}
          </td>
          <td class="px-4 py-2 font-semibold" :class="item.mtm > 0.03 ? 'text-red-500' : 'text-green-600'">
            {{ (item.mtm * 100).toFixed(2) }}
          </td>
          <td class="px-4 py-2 font-semibold">{{ (item.turnover_ratio * 100).toFixed(2) }}%</td>
          <td class="px-4 py-2 whitespace-nowrap">
            <template v-for="bkItem in item.bkList">
              <button
                type="button"
                @click="Utils.forwordBk(bkItem.plate_id)"
                class="inline-block rounded mr-2 p-1 text-sm leading-normal bg-white"
                :class="(bkItem.core_avg_pcp > 0 ? 'text-red-500' : 'text-green-600', bkItem.hit ? 'border-red-500 border-2' : 'border')"
              >
                {{ bkItem.plate_name }}
                {{ (bkItem.core_avg_pcp * 100).toFixed(2) }}%
              </button>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import Utils from '../utils/index';
import axios from 'axios';
import { ref } from 'vue';

const list = ref([]);
let result = [];

function fetchData() {
  axios.get('https://flash-api.xuangubao.cn/api/pool/bubble').then(function (res) {
    result = res.data.data;
    if (result.length > 0) {
      filterData();
      fetchBk();
    }
  });
}

function fetchBk() {
  let top_plates = JSON.parse(window.localStorage.getItem('top_plates'));
  list.value.forEach((e, index, arr) => {
    axios.get('https://flash-api.xuangubao.cn/api/stage2/plates_by_any_stock?fields=core_avg_pcp,plate_name&symbol=' + e.symbol).then(function (res) {
      let tmp = res.data.data;

      let plants = Object.keys(tmp);
      let bkList = [];

      // 交集和差集
      let jj = plants.filter((e) => top_plates.indexOf(e) > -1);
      let cj = plants.filter((e) => top_plates.indexOf(e) == -1);

      if (jj.length > 0) {
        let j1 = jj
          .map((e) => {
            tmp[e].hit = true;
            return tmp[e];
          })
          .sort(Utils.compare('core_avg_pcp'));
        let j2 = cj.map((e) => tmp[e]).sort(Utils.compare('core_avg_pcp'));
        bkList = j1.concat(j2);
      } else {
        bkList = Object.values(tmp).sort(Utils.compare('core_avg_pcp'));
      }
      if (bkList && bkList.length > 2) {
        bkList = bkList.slice(0, 2);
      }
      e.bkList = bkList;
    });
  });
}
function filterData() {
  let lb = 2; //量比
  let zs = 2; //涨速
  let hs = 1; //换手
  result = result.filter((b) => {
    //   //涨速大于2,涨幅大于0,量比大于2,换手大于2,非新股
    return b.mtm >= zs / 100 && b.change_percent > 0 && b.volume_bias_ratio >= lb && (b.stock_type == 0 || b.stock_type == 4) && b.turnover_ratio >= hs / 100;
  });
  result = result.sort(Utils.compare('mtm'));
  if (result.length > 10) {
    result = result.slice(0, 10);
  }
  list.value = result;
}

defineExpose({
  fetchData,
});
</script>
